<!DOCTYPE html>
<html lang="zh-cn" id="page-webpack">
<head prefix="og: http://ogp.me/ns#"><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  <title>Webpack - art-template</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Canonical links -->
  <link rel="canonical" href="http://aui.github.io/zh-cn/webpack/index.html">
  <!-- Alternative links -->
  
    
      <link rel="alternative" hreflang href="http://aui.github.io/art-template/webpack/index.html">
    
      <link rel="alternative" hreflang href="http://aui.github.io/art-template/webpack/index.html">
    
  
  <!-- Icon -->
  <!--<link rel="apple-touch-icon" sizes="57x57" href="/art-template/icon/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/art-template/icon/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/art-template/icon/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/art-template/icon/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/art-template/icon/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/art-template/icon/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/art-template/icon/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/art-template/icon/apple-touch-icon-152x152.png">
  <link rel="icon" type="image/png" href="/art-template/icon/favicon-196x196.png" sizes="196x196">
  <link rel="icon" type="image/png" href="/art-template/icon/favicon-160x160.png" sizes="160x160">
  <link rel="icon" type="image/png" href="/art-template/icon/favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/png" href="/art-template/icon/favicon-16x16.png" sizes="16x16">
  <link rel="icon" type="image/png" href="/art-template/icon/favicon-32x32.png" sizes="32x32">
  <meta name="msapplication-TileColor" content="#2f83cd">
  <meta name="msapplication-TileImage" content="/art-template/icon/mstile-144x144.png">
  -->
  <!-- CSS -->
  <!-- build:css build/css/art.css -->
  <link rel="stylesheet" href="/art-template/css/art.css">
  <!-- endbuild -->
  <!--<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type="text/css">-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css">
  <!-- RSS -->
  <link rel="alternate" href="/art-template/atom.xml" title="art-template">
  <!-- Open Graph -->
  <meta name="description" content="art-template loader for webpack. Installnpm install art-templatenpm install art-template-loader --save-dev UsageBy default every local &amp;lt;img src=&amp;quot;image.png&amp;quot;&amp;gt; is required (require(&amp;#39;.">
<meta property="og:type" content="website">
<meta property="og:title" content="Webpack">
<meta property="og:url" content="http://aui.github.io/zh-cn/webpack/index.html">
<meta property="og:site_name" content="art-template">
<meta property="og:description" content="art-template loader for webpack. Installnpm install art-templatenpm install art-template-loader --save-dev UsageBy default every local &amp;lt;img src=&amp;quot;image.png&amp;quot;&amp;gt; is required (require(&amp;#39;.">
<meta property="og:locale" content="zh-cn">
<meta property="og:image" content="https://cloud.githubusercontent.com/assets/1791748/25306107/55b2afba-27b9-11e7-903b-4700ac47a4d3.png">
<meta property="og:updated_time" content="2019-07-25T04:59:08.635Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Webpack">
<meta name="twitter:description" content="art-template loader for webpack. Installnpm install art-templatenpm install art-template-loader --save-dev UsageBy default every local &amp;lt;img src=&amp;quot;image.png&amp;quot;&amp;gt; is required (require(&amp;#39;.">
<meta name="twitter:image" content="https://cloud.githubusercontent.com/assets/1791748/25306107/55b2afba-27b9-11e7-903b-4700ac47a4d3.png">
  <!-- Google Analytics -->
  
  <!-- Github Button -->
  <script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body>
  <div id="container">
    <header id="header">
    <h1 id="logo-wrap">
      <a href="/art-template/zh-cn" id="logo">art-template</a>
    </h1>
    <div id="lang-select-wrap">
      <label id="lang-select-label"><i class="fa fa-globe"></i><span>简体中文</span></label>
      <select id="lang-select" data-root="/art-template/" data-lang="zh-cn" data-canonical="webpack/index.html">
        
          <option value="en">English</option>
        
          <option value="zh-cn" selected>简体中文</option>
        
      </select>
    </div>
    <nav id="main-nav">
      <div id="search-input-wrap">
        <div id="search-input-icon">
          <i class="fa fa-search"></i>
        </div>
        <input type="search" id="search-input">
      </div>
      <a href="/art-template/zh-cn/docs/" class="main-nav-link ">Docs</a><a href="/art-template/webpack/" class="main-nav-link ">Webpack</a><a href="/art-template/express/" class="main-nav-link ">Express</a><a href="/art-template/koa/" class="main-nav-link ">Koa</a>
      <!--<a href="https://github.com/aui/art-template" class="main-nav-link"><i class="fa fa-github-alt"></i></a>-->
    </nav>
    <a id="mobile-nav-toggle">
      <span class="mobile-nav-toggle-bar"></span>
      <span class="mobile-nav-toggle-bar"></span>
      <span class="mobile-nav-toggle-bar"></span>
    </a>
</header>

    <div id="content-wrap">
  <div id="content" class="wrapper">
    <div id="content-inner">
      <article class="article-container" itemscope itemtype="http://schema.org/Article">
        <div class="article-inner">
          <div class="article">
            <div class="inner">
              <header class="article-header">
                <h1 class="article-title" itemprop="name">Webpack</h1>
              </header>
              <div class="article-content" itemprop="articleBody">
                <p>art-template loader for webpack.</p>
<h2 id="Install" class="article-heading"><a href="#Install" class="headerlink" title="Install"></a>Install<a class="article-anchor" href="#Install" aria-hidden="true"></a></h2><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install art-template</span><br><span class="line">npm install art-template-loader --save-dev</span><br></pre></td></tr></table></figure>
<h2 id="Usage" class="article-heading"><a href="#Usage" class="headerlink" title="Usage"></a>Usage<a class="article-anchor" href="#Usage" aria-hidden="true"></a></h2><p>By default every local <code>&lt;img src=&quot;image.png&quot;&gt;</code> is required (<code>require(&#39;./image.png&#39;)</code>). You may need to specify loaders for images in your configuration (recommended <code>file-loader</code> or <code>url-loader</code>).</p>
<p>You can specify which attribute combination should be processed by this loader via the query parameter <code>htmlResourceRules</code>. (Default: <code>htmlResourceRules=[/\bsrc=&quot;([^&quot;]*)&quot;/]</code>)</p>
<p>To completely disable tag-attribute processing (for instance, if you’re handling image loading on the client side) you can pass in <code>htmlResourceRules=false</code>.</p>
<h2 id="Examples" class="article-heading"><a href="#Examples" class="headerlink" title="Examples"></a>Examples<a class="article-anchor" href="#Examples" aria-hidden="true"></a></h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [&#123;</span><br><span class="line">            test: <span class="regexp">/\.jpg$/</span>,</span><br><span class="line">            loader: <span class="string">"file-loader"</span></span><br><span class="line">        &#125;, &#123;</span><br><span class="line">            test: <span class="regexp">/\.png$/</span>,</span><br><span class="line">            loader: <span class="string">"url-loader?mimetype=image/png"</span></span><br><span class="line">        &#125;, &#123;</span><br><span class="line">            test: <span class="regexp">/\.art$/</span>,</span><br><span class="line">            loader: <span class="string">"art-template-loader"</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">                <span class="comment">// art-template options (if necessary)</span></span><br><span class="line">                <span class="comment">// @see https://github.com/aui/art-template</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">%</span> <span class="attr">include</span>('<span class="attr">.</span>/<span class="attr">header.art</span>') %&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">user</span>) &#123; %&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span><span class="tag">&lt;<span class="name">%=</span> <span class="attr">user.name</span> %&gt;</span><span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"./octocat.png"</span> <span class="attr">alt</span>=<span class="string">"octocat"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">%</span> &#125; %&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">%</span> <span class="attr">include</span>('<span class="attr">.</span>/<span class="attr">footer.art</span>') %&gt;</span></span><br></pre></td></tr></table></figure>
<p><a href="https://github.com/aui/art-template-loader/tree/master/example" target="_blank" rel="noopener">More</a></p>
<h2 id="‘Root-relative’-URLs" class="article-heading"><a href="#‘Root-relative’-URLs" class="headerlink" title="‘Root-relative’ URLs"></a>‘Root-relative’ URLs<a class="article-anchor" href="#‘Root-relative’-URLs" aria-hidden="true"></a></h2><p>For urls that start with a <code>/</code>, the default behavior is to not translate them.<br>If a <code>htmlResourceRoot</code> query parameter is set, however, it will be prepended to the url<br>and then translated.</p>
<p>With the same configuration as above:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- file.art --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"/image.jpg"</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">require</span>(<span class="string">"html-loader!./file.art"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// =&gt; '&lt;img  src="/image.jpg"&gt;'</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">require</span>(<span class="string">"html-loader?htmlResourceRoot=.!./file.art"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// =&gt; '&lt;img  src="http://cdn.example.com/49eba9f/a992ca.jpg"&gt;'</span></span><br></pre></td></tr></table></figure>
<h2 id="Filter" class="article-heading"><a href="#Filter" class="headerlink" title="Filter"></a>Filter<a class="article-anchor" href="#Filter" aria-hidden="true"></a></h2><p>Add filter:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> runtime = <span class="built_in">require</span>(<span class="string">'art-template/lib/runtime'</span>);</span><br><span class="line">runtime.dateFormat = <span class="function"><span class="keyword">function</span>(<span class="params">date, format</span>)</span>&#123; <span class="comment">/*[...]*/</span> &#125;;</span><br><span class="line"><span class="keyword">var</span> html = <span class="built_in">require</span>(<span class="string">'./index.art'</span>);</span><br></pre></td></tr></table></figure>
<p>Use filter:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">&#123;&#123;time | dateFormat 'yyyy-MM-dd hh:mm:ss'&#125;&#125;</span><br></pre></td></tr></table></figure>
<h2 id="Debug" class="article-heading"><a href="#Debug" class="headerlink" title="Debug"></a>Debug<a class="article-anchor" href="#Debug" aria-hidden="true"></a></h2><p>Support <code>SourceMap</code>:</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">webpack --debug</span><br></pre></td></tr></table></figure>
<p><img src="https://cloud.githubusercontent.com/assets/1791748/25306107/55b2afba-27b9-11e7-903b-4700ac47a4d3.png" alt="debug"></p>
<h2 id="Options" class="article-heading"><a href="#Options" class="headerlink" title="Options"></a>Options<a class="article-anchor" href="#Options" aria-hidden="true"></a></h2><p>You can pass <a href="../docs/options.html">art-template options</a>.<br>Using standard webpack <a href="https://webpack.js.org/configuration/module/#useentry" target="_blank" rel="noopener">loader options</a>.</p>
<h2 id="Github" class="article-heading"><a href="#Github" class="headerlink" title="Github"></a>Github<a class="article-anchor" href="#Github" aria-hidden="true"></a></h2><p>Home: <a href="https://github.com/aui/art-template-loader" target="_blank" rel="noopener">https://github.com/aui/art-template-loader</a></p>

              </div>
              <footer class="article-footer">
                <a href="https://github.com/aui/art-template-docs/edit/master/source/zh-cn/webpack/index.md" class="article-edit-link">改进本文</a>.
                (<time class="article-footer-updated" datetime="2019-07-25T04:59:08.635Z" itemprop="dateModified">上次更新：2019-07-25</time>)
                
              </footer>
              
            </div>
          </div>
        </div>
      </article>
      <aside id="sidebar" role="navigation">
  <div class="inner"><ul class="sidebar"><li><a data-scroll href="/art-template/zh-cn/webpack/index.html" class="sidebar-link current">Webpack</a><ol class="sidebar-sub"><li class="sidebar-sub-item sidebar-sub-level-2"><a class="sidebar-sub-link" href="/art-template/zh-cn/webpack/index.html#Install"><span class="sidebar-sub-text">Install</span></a></li><li class="sidebar-sub-item sidebar-sub-level-2"><a class="sidebar-sub-link" href="/art-template/zh-cn/webpack/index.html#Usage"><span class="sidebar-sub-text">Usage</span></a></li><li class="sidebar-sub-item sidebar-sub-level-2"><a class="sidebar-sub-link" href="/art-template/zh-cn/webpack/index.html#Examples"><span class="sidebar-sub-text">Examples</span></a></li><li class="sidebar-sub-item sidebar-sub-level-2"><a class="sidebar-sub-link" href="/art-template/zh-cn/webpack/index.html#‘Root-relative’-URLs"><span class="sidebar-sub-text">‘Root-relative’ URLs</span></a></li><li class="sidebar-sub-item sidebar-sub-level-2"><a class="sidebar-sub-link" href="/art-template/zh-cn/webpack/index.html#Filter"><span class="sidebar-sub-text">Filter</span></a></li><li class="sidebar-sub-item sidebar-sub-level-2"><a class="sidebar-sub-link" href="/art-template/zh-cn/webpack/index.html#Debug"><span class="sidebar-sub-text">Debug</span></a></li><li class="sidebar-sub-item sidebar-sub-level-2"><a class="sidebar-sub-link" href="/art-template/zh-cn/webpack/index.html#Options"><span class="sidebar-sub-text">Options</span></a></li><li class="sidebar-sub-item sidebar-sub-level-2"><a class="sidebar-sub-link" href="/art-template/zh-cn/webpack/index.html#Github"><span class="sidebar-sub-text">Github</span></a></li></ol></li></ul></div>
</aside>
    </div>
  </div>
</div>

    <footer id="footer" class="wrapper">
  <div class="inner">
    <div id="footer-copyright">
      &copy; 2019 aui<br>
      Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a>.
    </div>
    <div id="footer-links">
      <a href="http://weibo.com/planeart" class="footer-link" target="_blank"><i class="fa fa-weibo"></i></a>
      
      <a href="https://github.com/aui/art-template" class="footer-link" target="_blank"><i class="fa fa-github-alt"></i></a>
    </div>
  </div>
</footer>

  </div>
  <div id="mobile-nav-dimmer"></div>
  <nav id="mobile-nav">
  <div id="mobile-nav-inner">
    <nav id="mobile-nav-list">
      <a href="/art-template/zh-cn/docs/" class="mobile-nav-link ">Docs</a><a href="/art-template/webpack/" class="mobile-nav-link ">Webpack</a><a href="/art-template/express/" class="mobile-nav-link ">Express</a><a href="/art-template/koa/" class="mobile-nav-link ">Koa</a>
    </nav>
    
      <ul class="mobile-nav"><li><a data-scroll href="/art-template/zh-cn/webpack/index.html" class="mobile-nav-link current">Webpack</a><ol class="mobile-nav-sub"><li class="mobile-nav-sub-item mobile-nav-sub-level-2"><a class="mobile-nav-sub-link" href="/art-template/zh-cn/webpack/index.html#Install"><span class="mobile-nav-sub-text">Install</span></a></li><li class="mobile-nav-sub-item mobile-nav-sub-level-2"><a class="mobile-nav-sub-link" href="/art-template/zh-cn/webpack/index.html#Usage"><span class="mobile-nav-sub-text">Usage</span></a></li><li class="mobile-nav-sub-item mobile-nav-sub-level-2"><a class="mobile-nav-sub-link" href="/art-template/zh-cn/webpack/index.html#Examples"><span class="mobile-nav-sub-text">Examples</span></a></li><li class="mobile-nav-sub-item mobile-nav-sub-level-2"><a class="mobile-nav-sub-link" href="/art-template/zh-cn/webpack/index.html#‘Root-relative’-URLs"><span class="mobile-nav-sub-text">‘Root-relative’ URLs</span></a></li><li class="mobile-nav-sub-item mobile-nav-sub-level-2"><a class="mobile-nav-sub-link" href="/art-template/zh-cn/webpack/index.html#Filter"><span class="mobile-nav-sub-text">Filter</span></a></li><li class="mobile-nav-sub-item mobile-nav-sub-level-2"><a class="mobile-nav-sub-link" href="/art-template/zh-cn/webpack/index.html#Debug"><span class="mobile-nav-sub-text">Debug</span></a></li><li class="mobile-nav-sub-item mobile-nav-sub-level-2"><a class="mobile-nav-sub-link" href="/art-template/zh-cn/webpack/index.html#Options"><span class="mobile-nav-sub-text">Options</span></a></li><li class="mobile-nav-sub-item mobile-nav-sub-level-2"><a class="mobile-nav-sub-link" href="/art-template/zh-cn/webpack/index.html#Github"><span class="mobile-nav-sub-text">Github</span></a></li></ol></li></ul>
    
  </div>
  <div id="mobile-lang-select-wrap">
    <span id="mobile-lang-select-label"><i class="fa fa-globe"></i><span>简体中文</span></span>
    <select id="mobile-lang-select" data-canonical>
      
        <option value="en">English</option>
      
        <option value="zh-cn" selected>简体中文</option>
      
    </select>
  </div>
</nav>
  <!-- Scripts -->
<!-- build:js build/js/main.js -->
<script src="/art-template/js/lang_select.js"></script>
<script src="/art-template/js/scrollingelement.js"></script>
<script src="/art-template/js/mobile_nav.js"></script>
<!-- endbuild -->
<script src="https://cdn.jsdelivr.net/retinajs/1.3.0/retina.min.js" async></script>

<!-- Algolia -->


</body>
</html>